<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title th:text="${course['courseName']}+' - 直播详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <link rel="stylesheet" th:href="@{{path}/front/mobile/v3/wmui/0.6.2/css/wm-extend.min.css?v={v}(path=${staticPath},v=${v})}">
</head>
<body>
<div style="display: none">
    <input type="hidden" id="courseId" th:value="${course['id']}"/>
    <!--当前播放节点的资源类型-->
    <input type="hidden" id="materialTypeKey"/>
    <input type="hidden" id="price" th:value="${course['realPrice']}"/>
    <input type="hidden" id="buyStatus" th:value="${course['courseBuyStatus']['buy']}"/>
    <input type="hidden" id="playId" th:value="${catalogId}"/>
    <input type="hidden" id="course-summary" th:value="${course['summary']}" />
    <input type="hidden" id="courseImg" th:value="${course['imageMap']['mobileUrlMap']['large']}" />
</div>
<!--主体区域 开始-->
<div class="content wm-content ovf">
    <section class="course-play__wrap live-play__wrap">
        <!--加载播放器播放前显示-->
        <div  th:style="'background-image: url('+(!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['mobileUrlMap'])} and !${#strings.isEmpty(course['imageMap']['mobileUrlMap']['large'])} ?${course['imageMap']['mobileUrlMap']['large']}:'')+')'" class="course-play-bg"></div>
        <div class="live-cp-shadow">
            <a class="button button-link button-nav pull-left goBack mt5" th:href="${backUrl}">
                <span class="icon iconfont icon-fanhui c-bbb"></span>
            </a>
            <span class="button button-link cInfoShare-btn button-nav pull-right mt5">
                <i class="icon iconfont icon-liwu vam"></i><span class="vam">邀请好友</span>
            </span>
        </div>
        <aside class="live-play-title">
            <h3 class="ellipsis" th:text="${course['courseName']}"></h3>
            <span class="fs6">主讲：<th:block th:if="${course['teacherList']}!=null" th:text="${course['teacherList'][0]['teacherName']}"></th:block><th:block th:if="${course['teacherList']}==null">暂无讲师</th:block></span>
            <span class="fs6 ml5"><th:block th:text="${course['initBuyNum']}+${course['courseProfile']['buyCount']}"></th:block>人加入</span>
            <input type="hidden" id="lookNum" th:value="${course['courseProfile']['buyCount']}+${course['initBuyNum']}" />
        </aside>
        <!--加载播放器播放前显示-->
    </section>
    <section>
        <article class="live-cont__wrap">
            <div class="wp-live card">
                <section class="no-gutter wl-live-left">
                    <div class="wp-live-txt__wrap ellipsis" data-space-between='10'>
                        <em class="latest-live-ico"></em>
                        <div class="latest-live-line"></div>
                        <ul id="wp-live-txt__ul" class="swiper-wrapper">
                            <li th:if="!${#maps.isEmpty(course['liveCourseCatalog'])}" th:attrappend="data-id=${course['liveCourseCatalog']['id']},data-course=${course['id']}" class="swiper-slide now-live-box">
                                <section class="row">
                                    <section class="col-66">
                                        <span class="ellipsis" th:text="${course['liveCourseCatalog']['catalogName']}"></span>
                                        <span>
                                            <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],5,7)} + '月'"></th:block><th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],8,10)}"></th:block><th:block th:if="!${#strings.equals(#strings.substring(course['liveCourseCatalog']['lessonStartTime'],8,10),#strings.substring(course['liveCourseCatalog']['lessonEndTime'],8,10))}" th:text="${#strings.substring(course['liveCourseCatalog']['lessonEndTime'],7,10)}"></th:block>日
                                             <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],11,16)}"></th:block>
                                            -<th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonEndTime'],11,16)}"></th:block>
                                        </span>
                                    </section>
                                    <section class="col-33 text-right">
                                        <button th:if="${course['liveCourseCatalog']['livePlayState']}==1" class="button button-fill button-round button-danger watch-live">看直播</button>
                                        <button th:if="${course['liveCourseCatalog']['livePlayState']}==2" class="button button-fill button-round button-success watch-live">未开始</button>
                                        <button th:if="${course['liveCourseCatalog']['livePlayState']}==3 and ${course['liveCourseCatalog']['replay']} !=1" class="button button-fill button-round disabled watch-live">已结束</button>
                                        <button th:if="${course['liveCourseCatalog']['livePlayState']}==3 and ${course['liveCourseCatalog']['replay']} ==1" class="button button-fill button-round disabled watch-live">看回放</button>
                                        <button th:if="${course['liveCourseCatalog']['livePlayState']}==4" class="button button-fill button-round button-success watch-live">提前进入</button>
                                    </section>
                                </section>
                            </li>
                            <li th:if="${#maps.isEmpty(course['liveCourseCatalog'])}" class="swiper-slide">
                                <section class="row">
                                    <section class="col-66">
                                        <span class="ellipsis">暂无直播，后续期待...</span>
                                        <span>—</span>
                                    </section>
                                    <section class="col-33 text-right">
                                        <button class="button button-fill button-round disabled watch-live">无直播</button>
                                    </section>
                                </section>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </article>
        <div class="wm-buttons-tab__wrap" style="top: -.5rem;">
            <div class="buttons-tab wm-buttons-tab">
                <a href="#tab1" class="tab-link button active">详情</a>
                <a href="#tab2" class="tab-link button">目录</a>
                <a href="#tab3" class="tab-link button">评价</a>
                <a href="#tab4" class="tab-link button" id="interact">互动</a>
            </div>
        </div>
        <div class="content live-cont__box ovf">
            <div class="tabs">
                <!--详情-->
                <div id="tab1" class="tab content active">
                    <div class="wm-whiteBox mt5" style="padding: 0;" th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['memberBut']} and ${selaSwitch}==3">
                        <a th:href="@{/mobile/uc/member/queryAllMemberList}">
                            <ul class="list-block member-block-wrap">
                                <li class="item-content item-link">
                                    <div class="item-media ml5"><i class="icon iconfont icon-zuanshi fs7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">
                                                    <span class="fs7">
                                                        开通会员，购课可享会员价：
                                                        <span th:if="${course['courseBuyStatus']['memberPriceBut']}" th:text="'￥'+${course['memberPrice']}"></span>
                                                        <span th:if="${course['courseBuyStatus']['memberFreePriceBut']}">免费</span>
                                                    </span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </a>
                    </div>


                    <div class="wm-whiteBox mt5">
                        <div class="mt5">
                            <span class="c-333" id="courseName" th:text="${course['courseName']}"></span>
                            <input type="hidden" id="courseId" th:value="${course['id']}" />
                        </div>
                        <div class="mt5 fs4">
                            <span class="c-888">讲师：</span>
                            <span class="c-333">
                                        <th:block th:each="teacher : ${course['teacherList']}" th:text="${teacher['teacherName']} +' '"></th:block>
                                        <th:block th:if="${course['teacherList']}==null" th:text="'暂无讲师'"></th:block>
                                    </span>
                        </div>
                        <div class="mt5 fs4" th:if="${course['validType']}==1">
                            <span class="c-888">有效期：</span>
                            <span class="c-333">自购买之日起 </span>
                            <span class="c-red" th:text="${course['validDay']}">0</span>
                            <span class="c-333"> 天内</span>
                        </div>
                        <div class="mt5 fs4" th:if="${course['validType']}==2">
                            <span class="c-888">有效期：</span>
                            <span class="c-333">自购买之日起 到</span>
                            <span class="c-red" th:text="${#strings.substring(course['validTime'],0,10)}">0</span>
                            <span class="c-333">前可反复学习，</span>
                            <div>
                                <span th:text="${#strings.substring(course['dontBuyTime'],0,10)}" class="c-red"></span>
                                <span class="c-333">前可自由报名</span>
                            </div>
                        </div>
                        <div class="mt5 fs4">
                            <span class="c-888">更新至：</span>
                            <span class="c-333" th:if="${course['contextStatus']} == 1" id="last-update">暂无更新</span>
                            <span class="c-333" th:if="${course['contextStatus']} == 2">本课已全部完结</span>
                        </div>
                        <div class="mt5">
                            <div class="row">
                                <div class="col-auto course-teacher-show">
                                    <ol class="face-group__wrap pl5">
                                        <li th:if="!${#lists.isEmpty(course['teacherList'])}" th:each="teacher,index : ${course['teacherList']}">
                                            <img th:if="${index['index']} < 3" th:attrappend="data-src=${teacher['imageMap']['mobileUrlMap']['large']}" th:src="@{{path}/front/mobile/v3/img/default/error-pic.jpg?v={v}(path=${staticPath},v=${v})}" width="24" height="24" th:alt="${teacher['teacherName']}">
                                        </li>
                                    </ol>
                                </div>
                                <div class="col-auto">
                                    <section class="pl5 mt5">
                                            <span class="c-666 fs4">

                                                <samp>共有</samp>
                                                <samp th:if="${course['courseProfile']['buyCount']}+ ${course['initBuyNum']} >= 10000" th:text="${#numbers.formatDecimal((course['courseProfile']['buyCount']+course['initBuyNum'])/10000D,1,1,'POINT')}+'万人在学此课程'"></samp>
                                                <samp th:if="${course['courseProfile']['buyCount']}+ ${course['initBuyNum']} < 10000" th:text="${course['courseProfile']['buyCount']}+${course['initBuyNum']}+'人在学此课程'"></samp>
                                            </span>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wm-whiteBox mt5">
                        <div class="row no-gutter">
                            <div class="col-auto">
                                <span class="button button-tip-bx button-tip-warning-bx" style="opacity: .8;">服务</span>
                            </div>
                            <div class="col-auto ml5">
                                <span class="fs6" th:text="${course['courseService']}">随堂练习·随堂资料·作业批改·免费答疑</span>
                            </div>
                        </div>
                    </div>
                    <div class="wm-whiteBox mt5">
                        <div class="row no-gutter">
                            <div class="col-20">
                                <span class="button button-tip-bx button-tip-warning-bx">活动</span>
                            </div>
                            <div class="col-80" id="activity-context-box">
                                <section>
                                    <span class="fs6">暂无活动</span>
                                </section>
                            </div>
                        </div>
                        <hr class="coupon-box">
                        <div class="row no-gutter pb5 coupon-box">
                            <div class="col-20">
                                <span class="button button-tip-bx button-tip-danger-bx">优惠</span>
                            </div>
                            <div class="col-60">
                                <section>
                                    <span class="c-red icon iconfont icon-youhuiquan fs8"></span>
                                    <span class="fs6 vam">点击进入领取优惠券</span>
                                </section>
                            </div>
                            <div class="col-20 text-right">
                                <a href="javascript:;" class="selectOpcardBtn c-888 fs6">
                                    <span class="vam">领券</span>
                                    <span class="vam icon icon-right fs4"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="wm-whiteBox mt5">
                        <section class="mb5"><span class="fs6 c-333">简介</span></section>
                        <section class="wm-article-cont__wrap">
                            <div id="details" th:utext="${course['details']}"></div>
                        </section>
                    </div>

                </div>
                <!--详情-->
                <!--目录-->
                <div id="tab2" class="tab content">
                    <div class="course-menu-tree__wrap">
                        <div class="lecture-list__wrap">
                            <div class="list-block">
                                <ul class="list-container" id="live-course-catalog-box">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--目录-->
                <!--反馈-->
                <div id="tab3" class="tab content">
                    <div class="page-group">
                        <div id="page-infinite-scroll-bottom" class="page page-current course-comment__wrap">
                            <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                                <div class="wm-title__wrap card-header mt5">
                                    <span class="fs8 c-333" id="course-comment-count">全部评价(0)</span>
                                </div>
                                <article class="">
                                    <div class="list-block no-mt">
                                        <ul id="course-comment-list" class="list-container wm-question-list__wrap facebook-card">
                                        </ul>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
                <!--反馈-->

                <div id="tab4" class="tab content">
                    <div class="content-padded">
                        <section class="re-class" style="display: none;">
                            <div class="hLh30">
                                <span class="fs8 c-333">关联班级</span>
                            </div>
                            <div class="course-class__wrap mt5">
                                <ul class="course-class-item-box clearfix">

                                </ul>
                            </div>
                        </section>
                        <section class="wm-line  re-class" style="display: none;"></section>
                        <section class="list-block exam-in-item-list__wrap">
                            <ul>
                                <li class="item-content item-link">
                                    <a  id="qa-teacher-btn2" data-type="0">
                                        <div class="item-media">
                                            <span class="exam-in-item-icon course-in-item-icon-1">&nbsp;</span>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">
                                                <span class="wm-title-txt"><span class="fs8">向当前问答专家免费提问</span></span>
                                                <section class="wm-desc-wrap">
                                                    <span class="fs4 c-999">已报名可免费向相关讲师提相关任何专业性问题</span>
                                                </section>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <!-- <li class="item-content item-link">
                                     <a href="javascript:void(0)" id="">
                                         <div class="item-media">
                                             <span class="exam-in-item-icon course-in-item-icon-2">&nbsp;</span>
                                         </div>
                                         <div class="item-inner">
                                             <div class="item-title">
                                                 <span class="wm-title-txt"><span class="fs8">互动测评</span> <small class="fs4 c-red">（提交结果有奖励哦！）</small></span>
                                                 <section class="wm-desc-wrap">
                                                     <span class="fs4 c-999">此课程设置了在线趣味互动测试题，快去试试，看看你的测试结果吧</span>
                                                 </section>
                                             </div>
                                         </div>
                                     </a>
                                 </li>
                                 <li class="item-content item-link">
                                     <a href="javascript:void(0)" id="">
                                         <div class="item-media">
                                             <span class="exam-in-item-icon course-in-item-icon-3">&nbsp;</span>
                                         </div>
                                         <div class="item-inner">
                                             <div class="item-title">
                                                 <span class="wm-title-txt"><span class="fs8">表单问卷</span></span>
                                                 <section class="wm-desc-wrap">
                                                     <span class="fs4 c-999">您有一份表单问卷，请查收。提交问卷可获得积分奖励</span>
                                                 </section>
                                             </div>
                                         </div>
                                     </a>
                                 </li>-->
                            </ul>
                        </section>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>
<!--主体区域 结束-->

<!--menu begin-->
<nav class="bar bar-tab course-info-bar-tab">
    <a  class="tab-item external active" th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:'javascript:void(0);'"  th:classappend="(${serviceMap['type']}==1 or ${serviceMap['type']}==null  or ${serviceMap['type']}=='')?'online-consultation':''" th:attrappend="data-course=${serviceMap['context']}" href="javascript:void(0);" style="display: table-cell !important;">
        <span class="icon icon-phone vam" style="font-size: 0.92rem;"></span>
        <span class="tab-label vam">在线咨询</span>
    </a>
    <!--<a class="tab-item external" id="c-dashang-btn" href="javascript:;">
        <span class="icon icon-gift"></span>
        <span class="tab-label">打赏</span>
    </a>-->
    <th:block th:if="(${course['status']}==2   or ${course['status']}==3) and !${course['courseBuyStatus']['buy']} ">
        <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" id="abandoned">
            <span th:text="'课程以下架'" class="fs7"></span>
        </a>
    </th:block>
    <th:block th:if="${course['status']}==5   and !${course['courseBuyStatus']['buy']} ">
        <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}">
            <span class="fs7">课程已停售</span>
        </a>
    </th:block>
    <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 or ${course['status']}==5)">
        <a th:if="${course['courseBuyStatus']['buyBut']}" id="c-sign-up-btn" class="tab-item external cInfo-price-bx" href="javascript:void(0);">
            <span class="fs4">￥</span>
            <span th:text="${course['realPrice']}"></span>
            <span class="fs7"> 立即报名</span>
        </a>

        <a th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['freeBuyBut']}" id="free-order" th:attr="data-paytype=${course['courseBuyStatus']['payType']}" class="tab-item external cInfo-price-bx" href="javascript:void(0);">
            <span class="fs7"> 免费报名</span>
        </a>
        <a th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['memberBut']}" class="tab-item external cInfo-price-bx" th:href="@{/mobile/uc/member/queryAllMemberList}">
            <i class="icon iconfont icon-zuanshi" style="font-size: .8rem;line-height: 0;"></i>
            <div style="display: inline-block;text-align: left;">
                <span style="font-size: .8rem">会员课程</span>
                <p class="fs6" style="margin: 0;color: #FED6D6;">立即开通学习</p>
            </div>
        </a>
    </th:block>
    <a style="display: none;" class="tab-item external active" id="c-share-btn" href="javascript:void(0);">
        <span class="icon icon-share"></span>
        <span class="tab-label">分享</span>
    </a>
    <a class="tab-item external active" style="display: none;" id="qa-teacher-btn">
        <span class="icon icon-friends"></span>
        <span class="tab-label">向讲师提问</span>
    </a>
    <a id="c-comment-btn" style="display: none;" data-eval="只能评论正在学习的课程" class="tab-item external active" href="javascript:void(0);">
        <span class="icon icon-message"></span>
        <span class="tab-label">反馈评分</span>
    </a>
</nav>
<!--menu end-->

<!--反馈评分 Popup 开始-->
<div class="popup popup-about feedbackPopup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="course-comment-close">
            <span class="iconfont icon-guanbi ml5"></span>
        </button>
        <button class="button button-link button-nav pull-right" id="course-submit-feedback">
            <span class="mr5">提交</span>
        </button>
        <h1 class="title">反馈评分课程</h1>
    </header>
    <div class="content">
        <div class="content-padded feedbackPopup-bx pl5 pr5">
            <section class="mt5 pt5">
                <header class="card-header">
                    <span class="c-333">课程质量</span>
                    <small class="c-bbb fs4">你觉得课程播放时是否足够流畅清晰，体验顺畅</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="quality" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">老师讲法</span>
                    <small class="c-bbb fs4">你觉得老师讲是否做到重点突出，简直明了</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="teach" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">综合感受</span>
                    <small class="c-bbb fs4">我对这节课的综合感受</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="feel" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">偶尔吐槽</span>
                    <small class="c-bbb fs4">我还有其它话要说，别拦我</small>
                </header>
                <div class="mt5">
                    <textarea id="comment" class="feedback-txtarea" placeholder="别憋着，说两句~~~"></textarea>
                </div>
            </section>
        </div>
    </div>
</div>
<!--反馈评分 Popup 结束-->

<!--随堂练习 对话框内容 开始-->
<textarea id="c-classTest-ele" class="hide">
        <div class="text-center pr pt5 pb5">
            <aside class="c-classTest-icon"><span>&nbsp;</span></aside>
            <h3 class="pt5" style="margin-bottom: 0;font-weight: 200;">即将进入随堂练习</h3>
            <span class="fs7 c-bbb">本次练习共</span>
            <span class="fs7 c-blue">5</span>
            <span class="fs7 c-bbb">题</span>
        </div>
    </textarea>
<!--随堂练习 对话框内容 结束-->

<!-- 浏览直播 -->
<div class="popup popup-about course-live-read-popup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="course-live-close">
            <span class="iconfont icon-guanbi ml5"></span></button>
        <h1 class="title">直播室</h1>
    </header>

    <div class="content">
        <div style="height: 100%" id="course-live-container">

        </div>
    </div>
</div>


<div data-th-replace="layout/footer"></div>
<script th:src="@{{path}/front/mobile/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src='@{{path}/front/mobile/libs/swiper/swiper.min.js?v={v}((path=${staticPath}, v=${v})}' charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/live/live-info.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/course-info-coupon.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/live/live-course-catalog.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/comment/course-comment.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/play/course-play.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/front/mobile/business/course/play/load-html.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:inline="javascript" type="text/javascript">
    $(function () {
        //最近多直播向上滚动方法
        upScroll('.wp-live-txt__wrap');
    });
    var courseTypeKey = [[${course['courseTypeKey']}]];
    var courseId = [[${course['id']}]];
    var initCatalogId = [[${catalogId}]];

</script>
</body>
</html>
